<template>
  <!-- 背景图 -->
  <div class="background">
    <i class="iconfont icon-renyuanbianji" />
    <!-- 个人信息卡片 -->
    <div class="card">
      <!-- 头像 -->
      <div class="head-portrait">
        <img
          :src="userInfo.userImg"
          alt=""
        >
      </div>
      <!-- 名字 -->
      <div class="title">
        {{ userInfo.name }}
      </div>
      <!-- ID -->
      <div class="account">
        ID: {{ userInfo.userId }}
      </div>
      <!-- 钱包 -->
      <ul class="personal-list">
        <li>
          <span>已连续打卡</span>
          <span>{{ com.card.a - 1 }}</span>
        </li>
        <li>
          <span>记账总天数</span>
          <span>{{ com.card.a - 1 }}</span>
        </li>
        <li>
          <span>记账总笔数</span>
          <span>{{ com.card.b }}</span>
        </li>
      </ul>
    </div>
  </div>
  <!-- 账单 -->
  <div class="card-item">
    <div>
      <span>账单</span>
      <i class="iconfont icon-jiantouyou" />
    </div>
    <card :msg="com.bills" />
  </div>
  <!-- icon卡片 -->
  <div class="icon-card">
    <iconCard
      class="item"
      :list="list"
    />
  </div>
  <!-- 选项 -->
  <ul class="option">
    <li>
      <i class="iconfont icon-zichanguanjia icon" />
      <span>资产管家</span>
      <i class="iconfont icon-jiantouyou" />
    </li>
    <li>
      <i class="iconfont icon-fapiao icon" />
      <span>发票助手</span>
      <i class="iconfont icon-jiantouyou" />
    </li>
    <li @click="logOut">
      <i class="iconfont icon-tuichudenglu icon" />
      <span>退出登录</span>
      <i class="iconfont icon-jiantouyou" />
    </li>
  </ul>
  <!-- 弹窗 -->
  <div
    class="mask"
    v-show="mask"
  >
    <div class="mask-box">
      <span>确定要退出登录吗？</span>
      <div>
        <button @click="cancelMask">
          取消
        </button>
        <button @click="confirmMask">
          确定
        </button>
      </div>
    </div>
  </div>
</template>

<script setup  name='Personal'>
import { onMounted, reactive, ref } from 'vue'
import { getItem, removeItem } from '@/utils/token'
import { myListInfo } from '@/api/public'
import { useRouter } from 'vue-router'

// 声明变量
const userInfo = reactive({})
const list = ref([])
const mask = ref(false)
const router = useRouter()
const com = reactive({
  card: {},
  bills: {}
})

// 获取用户信息
onMounted(() => {
  const user = getItem('TOKEN')
  com.card = getItem('card')
  if (user) {
    Object.assign(userInfo, user)
    com.bills = getItem('REBILLS')
  } else {
    userInfo.userImg = getItem('REBILLS').userImg
    com.bills = getItem('REBILLS')
  }
})

// 获取卡片列表
onMounted(async () => {
  const result = await myListInfo()
  if (result.code === 200) {
    list.value = result.data
  }
})

// 弹窗
const cancelMask = () => {
  mask.value = false
}

// 退出登录
const confirmMask = () => {
  mask.value = false
  removeItem('TOKEN')
  removeItem('REBILLS')
  removeItem('result')
  removeItem('card')
  router.replace('/home')
}

// 弹窗
const logOut = () => {
  mask.value = true
}
</script>

<style lang="less" scoped>
.background {
  position: relative;
  width: 100%;
  height: 250px;
  background: linear-gradient(to left top, #8B658B, #8b658b9e);
  border-radius: 0% 0% 50% 50%;
  i.icon-renyuanbianji {
    position: absolute;
    top: 40.5px;
    right: 31.8px;
    font-size: 35px;
    color: #fff;
  }
  div.card {
    position: absolute;
    top: 108px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 90%;
    height: 190px;
    background-color: #fff;
    box-shadow: 0.5px 0.5px 10px #333;
    border-radius: 10px;
    .head-portrait {
      position: absolute;
      top: -50%;
      left: 50%;
      transform: translate(-50%, 50%);
      width: 95px;
      height: 95px;
      background: #333;
      border-radius: 50%;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        border: 1px solid gray;
      }
    }
    .title {
      width: 100%;
      font-size: 24px;
      color: #262628;
      text-align: center;
      line-height: 24px;
      margin-top: 50px;
      i.icon-chengjiu {
        font-size: 16px;
        margin-left: 10px;
      }
    }
    .account {
      width: 100%;
      height: 17px;
      margin-top: 10px;
      text-align: center;
      line-height: 17px;
      font-size: 14px;
      color: #c1c0c9;
    }
    .personal-list {
      width: 100%;
      height: 50px;
      display: flex;
      justify-content: space-around;
      box-sizing: border-box;
      margin-top: 10px;
      padding: 0px 20px;
      li {
        display: inherit;
        flex-direction: column;
        align-items: center;
        span {
          &:nth-child(1) {
            font-size: 12px;
            color: #c1c0c9;
            margin-bottom: 8px;
          }
          &:nth-child(2) {
            font-size: 20px;
            color: #262628;
          }
        }
      }
    }
  }
}
.card-item{
  width: 90%;
  margin-top: 60px;
  margin-left: 50%;
  margin-bottom: 5px;
  transform: translate(-50%,0);
  border: 1px solid rgba(128, 128, 128, 0.36);
  border-radius: 5px;
  box-shadow: 0.5px 0.5px 10px #333;
  div{
    display: flex;
    justify-content: space-between;
    align-items: center;
    span{
      font-size: 15px;
      margin-left: 5px;
    }
    i{
      font-size: 10px;
      color: gray;
      margin-right: 5px;
    }
  }
}
.icon-card{
  width: 98%;
  margin-top: 10px;
  margin-left: 50%;
  transform: translate(-50%,0);
  .item{
    height: 60px;
    box-shadow: 0.5px 0.5px 10px #333;
  }
}
.option {
  margin-top: 5px;
  margin-left: 50%;
  margin-bottom: 50px;
  transform: translate(-50%, 0);
  width: 90%;
  height: 146px;
  border-bottom: 1px solid rgba(128, 128, 128, 0.3);
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  li {
    display: flex;
    justify-content: space-between;
    font-size: 22px;
    i.icon {
      font-size: 25px;
      color: #8B658B;
    }
    span {
      flex: 2;
      margin-left: 18px;
      font-size: 16px;
      color: #262626;
    }
    i.icon-jiantouyou {
      color: #c2c4ca;
    }
  }
}
.mask{
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.4);
  .mask-box{
    width: 300px;
    padding: 10px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background-color: #fff;
    span{
      font-size: 18px;
    }
    div{
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 15px;
      button{
        width: 80px;
        height: 30px;
        font-size: 20px;
        outline: none;
        border: none;
        background-color: #8b658b58;
        border-radius: 10px;
      }
    }
  }
}
</style>
